/*-----------------------------------------------------------------------------
  [CSS - Layout]

  Feuille de style pour le positionnement des éléments
  
  1. Functions
  	1.1 Screens functions : Story
  	1.2 Screens functions : Spellbook
  	1.3 Screens functions : stats
  	1.4 Screens functions : Settings
  	1.5 Screens functions : Shortcuts
  	1.6 Display Game

  2. DomReady
  	2.1 Main Menu
	2.2 Initialize close buttons
  	2.3 Spellbook Custom Menu
  	2.4 Spellbook Custom Menu
  
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------
[1. Functions]
*/
	/*---------------------------------------------------------------------
	[1.1 Screens functions : Story]
	*/
	function displayStory() {
		// Hide other menus
		addClass($('#main_menu #shortcuts'), 'hide');
		addClass($('#main_menu #stats'), 'hide');
		addClass($('#main_menu #spellbook'), 'hide');
		addClass($('#main_menu #settings'), 'hide');

		$('#levels').innerHTML = '';

		// Load preview for levels
		for (x in game.mLevel.levels) {
			var key = x;
			if (!isNaN(x)) {
				// New elements
				var div = document.createElement('div');
				var img = document.createElement('img');

				// Attribute of element IMG
				img.id = 'level_'+x;
				img.src = LevelConf[game.mLevel.levels[key]].preview;
				img.setAttribute('data-level', game.mLevel.levels[key]);
				img.onclick = function(event) {
					game.mLevel.instantiate(event.target.getAttribute('data-level'));
					displayGame();
					startGame();
				}

				// Attribute of element DIV
				div.setAttribute('data-hint', game.mLevel.levels[key]);

				// Class
				addClass(div, 'level');
				addClass(div, 'hint--error');
				addClass(div, 'hint--right');
				if (LevelConf[game.mLevel.levels[key]].locked) {
					addClass(div, 'lock');
					img.src = "img/icon/lock.png";
				}

				// Append to DOM
				div.appendChild(img);
				$('#levels').appendChild(div);
			}
		}
		// Show story screen
		removeClass($('#main_menu #story'), 'hide');
	}
	
	/*---------------------------------------------------------------------
	[1.2 Screens functions : Spellbook]
	*/
	// Display spellbook screen
	function displaySpellbook() {
		// Hide other menus
		addClass($('#main_menu #shortcuts'), 'hide');
		addClass($('#main_menu #story'), 'hide');
		addClass($('#main_menu #stats'), 'hide');
		addClass($('#main_menu #settings'), 'hide');

		// Hide inside menu and show the main spellbook menu
		addClass($('#main_menu #spellbook #custom'), 'hide');
		removeClass($('#main_menu #spellbook #spells'), 'hide');		

		for (x in game.mSpell.spells) {
			if (!isNaN(x)) {
				var spell = game.mSpell.spells[x];
				var img = '<img id="spell_'+x+'" src="img/icon/spells/512x512/'+SpellConf.previewIcons[spell.icon]+'"/>';
				var div = $('#main_menu #spellbook #spells div#spell_'+x);
				div.innerHTML = img;
				div.setAttribute('data-hint', game.mSpell.spells[x].name);
				addClass(div, 'hint--top');
				addClass(div, 'hint--error');
			}
		}

		// Show spellbook screen
		removeClass($('#main_menu #spellbook'), 'hide');
	}

	// Display custom spell screen
	var spellIconID = 0;
	function customSpell(id) {

		if (typeof arguments[0] != 'number') {
			warn("customSpell : require first argument to be id of spell (number) - "+(typeof arguments[0])+" given.");
			return;
		}

		// Get spell from spellbook
		var spell = game.mSpell.spells[id];

		// If spell entry does not exists
		if(typeof spell === "undefined") {
			spell = new Spell();
			spell.name += " "+id;
			game.mSpell.spells[id] = spell;
			game.mSpell.save();
		}

		// Generate preview icons
		$('#main_menu #spellbook #custom .left #preview').innerHTML = '';
		for (x in SpellConf.previewIcons) {
			if (!isNaN(x)) {
				var i = "icon_"+x;
				var c = (x != 0) ? "slide hide" : "slide";
				var src = "img/icon/spells/512x512/"+SpellConf.previewIcons[x];
				var slide = '<img id="spell_'+i+'" class="'+c+'" src="'+src+'" />';
				$('#main_menu #spellbook #custom .left #preview').innerHTML += slide; 
			}
		}

		addClass($('#spells'),"hide");

		removeClass($('#main_menu #spellbook #custom'),"hide");
		// $('#main_menu #spellbook #custom .right').innerHTML = spell.show();
		spell.show();
		$('#main_menu #spellbook #custom .left #spell_name').value = $('#main_menu #spellbook #custom .right #name').value;
		spellIconID = parseInt($('#main_menu #spellbook #custom .right #icon').value);
		displaySpellIcon(spellIconID);
		$('#main_menu #spellbook #custom').setAttribute("data-id", id);
	}

	// Display right spell icon accordingly with id
	function displaySpellIcon(id) {
		addClass($('#spellbook #custom #preview .slide'), 'hide');
		if ($('#spellbook #custom #preview .slide#spell_icon_' + id).length != 0)
			removeClass($('#spellbook #custom #preview .slide#spell_icon_' + id), 'hide');
		$('#main_menu #spellbook #custom .right #icon').value = id;
	}

	
	/*---------------------------------------------------------------------
	[1.3 Screens functions : stats]
	*/
	function displaystats() {
		// Hide other menus
		addClass($('#main_menu #shortcuts'), 'hide');
		addClass($('#main_menu #story'), 'hide');
		addClass($('#main_menu #spellbook'), 'hide');
		addClass($('#main_menu #settings'), 'hide');

		// Set Datas
		$('#main_menu #stats #best_score_value').innerHTML = game.mScore.bestScore;

		// Show stats screen
		removeClass($('#main_menu #stats'), 'hide');
	}

	/*---------------------------------------------------------------------
	[1.4 Screens functions : Settings]
	*/
	function displaySettings() {
		// Hide other menus
		addClass($('#main_menu #shortcuts'), 'hide');
		addClass($('#main_menu #story'), 'hide');
		addClass($('#main_menu #spellbook'), 'hide');
		addClass($('#main_menu #stats'), 'hide');

		// Show settings screen
		removeClass($('#main_menu #settings'), 'hide');
	}

	/*---------------------------------------------------------------------
	[1.5 Screens functions : Shortcuts]
	*/
	function displayShortcuts() {
		// Hide other menus
		addClass($('#main_menu #story'), 'hide');
		addClass($('#main_menu #spellbook'), 'hide');
		addClass($('#main_menu #stats'), 'hide');
		addClass($('#main_menu #settings'), 'hide');

		// Show shortcuts screen
		removeClass($('#main_menu #shortcuts'), 'hide');
	}

	/*---------------------------------------------------------------------
	[1.6 Display Game]
	*/
	function displayGame() {
		displayShortcuts();
		addClass($('#main_menu'), 'hide');
	}

	/*---------------------------------------------------------------------
	[1.7 Display Main Menu]
	*/
	function displayMenu() {
		displayShortcuts();
		removeClass($('#main_menu'), 'hide');
	}
	


/*---------------------------------------------------------------------
[2. DomReady]
*/
DomReady.ready(function() {

	/*---------------------------------------------------------------------
	[2.1 Main Menu]
	*/
	$('#shortcut_story .shortcut').onclick = function(event) {
		displayStory();
	}

	$('#shortcut_spellbook .shortcut').onclick = function(event) {
		displaySpellbook();
	}

	$('#shortcut_stats .shortcut').onclick = function(event) {
		displaystats();
	}

	$('#shortcut_settings .shortcut').onclick = function(event) {
		displaySettings();
	}

	/*---------------------------------------------------------------------
	[2.2 Initialize close buttons]
	*/
	var closeButtons = $('#main_menu .sub_menu > .close');
	for (var i = 0; i < closeButtons.length; i++) {
		var closeButton = closeButtons[i];
		closeButton.onclick = function(event) {
			addClass(event.toElement.parentNode, 'hide');
			displayShortcuts();
		};
	}

	/*---------------------------------------------------------------------
	[2.3 Spellbook Selection Menu]
	*/
	var addSpellButtons = $('.add_spell');
	for (var i = 0; i < addSpellButtons.length; i++) {
		var addSpellButton = addSpellButtons[i];
		addSpellButton.onclick = function(event) {
			event.preventDefault();
			var id = event.toElement.id.replace(/spell_/, '');
			customSpell(parseInt(id));
		}
	}

	/*---------------------------------------------------------------------
	[2.4 Spellbook Custom Menu]
	*/
	$('#spellbook #custom #cancel').onclick = function(event) {
		event.preventDefault();
		displaySpellbook();
		return false;
	}

	$('#spellbook #custom .close').onclick = function(event) {
		displaySpellbook();
	}

	$('#spellbook #custom #preview').onclick = function(event) {
		spellIconID = (spellIconID + 1 <= 7) ? spellIconID + 1 : 0;
		displaySpellIcon(spellIconID);
	}

	$('#spellbook #custom #preview').oncontextmenu = function(event) {
		event.preventDefault();
		spellIconID = (spellIconID - 1 >= 0) ? spellIconID - 1 : 7;
		displaySpellIcon(spellIconID);
		return false;
	}
	
	// Configure plus and minus buttons
	var plus = $('#spellbook #custom .right .button_block .plus');
	var minus = $('#spellbook #custom .right .button_block .minus');
	for (x in plus) { 
		if (typeof plus[x] == 'object') {
			plus[x].onclick = function(event) {
				var parentID = this.parentNode.parentNode.id;
				var input = $('#' + parentID + ' .input');
				if (input.value < parseInt(input.max) - 1 )
					input.value++;
			}
		}
	}
	for (x in minus) { 
		if (typeof minus[x] == 'object') {
			minus[x].onclick = function(event) {
				var parentID = this.parentNode.parentNode.id;
				var input = $('#' + parentID + ' .input');
				if (input.value > parseInt(input.min) )
					input.value--;
			}
		}
	}

	$('#spellbook #custom #save').onclick = function(event) {
		log("SAVE CUSTOM SPELL");

		event.preventDefault();
		
		var conf = {};

		// Revert value for name
		$('#name').value = $('#main_menu #spellbook #custom .left #spell_name').value;

		var id = $('#main_menu #spellbook #custom').getAttribute("data-id");
		var inputs = $('#main_menu #spellbook .right input');
		var select = $('#main_menu #spellbook .right select');

		for(var iI = 0, c = inputs.length; iI < c; iI++) {
			conf[inputs[iI].name] = inputs[iI].value;
		}

		// for(var iS = 0, c = selects.length; iS < c; iS++) {
			var option = getSelected(select);
			conf[select.name] = option.value;
		// }

		conf = JSON.stringify(conf);

		var spell = new Spell();
		spell.unserialize(conf);

		spell.cooldown = spell.getCooldown();

		game.mSpell.spells[id] = spell;
		game.mSpell.save();

		displaySpellbook();

		return false;
	}

	/*---------------------------------------------------------------------
	[2.5 Story Levels Menu]
	*/
});

